<!--
 * @Description: 三维地图的组件
 * @Author: your name
 * @version: 
 * @Date: 2024-05-08 16:34:13
 * @LastEditors: your name
 * @LastEditTime: 2024-09-10 09:25:51
-->
<template>
  <div id="cesium-viewer">
    <slot />
    <ToolBar />
  </div>
</template>

<script setup>
import * as Cesium from 'cesium';
// markRaw是vue提供的一个全局API, 其可以让一个对象保证不被Vue的响应系统处理, 这样可以提高性能
import { onMounted, markRaw, defineEmits } from 'vue';
import app from '../main';
import {
  initViewer,
  setScene,
  loadTilesets,
  loadWaterJson,
  handleDefaultModelEffect,
  flyToDefaultView,
  handleUpdateScene,
} from '@/cesiumTools/sceneManager';
import { useLineData } from '@/store';
import { getWeather, getLine } from '@/api/line.js';
import ToolBar from '../components/toolBar.vue';

const lineDataStore = useLineData();

// 定义发射事件
const emit = defineEmits(['mounted']);

//初始化cesium实例
Cesium.Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ODAzN2EzOS1kZDMzLTQ5Y2UtYjYxMi1jMzQxNTdiMTUzN2IiLCJpZCI6NDU5NDIsImlhdCI6MTYxNTYyNDQyOX0.BucgmI6OJ-7ixj7rcQ_Qyg45DkvdHmaLrFwyMYitLcI';

onMounted(async () => {
  const viewer = initViewer('cesium-viewer');

  // 获取 Viewer 的 Clock 对象
  const clock = viewer.clock;
  // 添加 onTick 事件监听器
  clock.onTick.addEventListener(function (clock) {
    // 在这里处理时间变化逻辑
    const gregorianDate = Cesium.JulianDate.toGregorianDate(
      clock.currentTime,
      new Cesium.GregorianDate()
    );
    //console.log('当前时间:', gregorianDate);
    //handleUpdateScene(viewer);
  });
  // console.log(data);

  setScene(viewer);
  flyToDefaultView(viewer);

  const modelUrls = [
    {
      url: 'http://localhost:8888/wuhan/tileset.json',
      options: {},
    },
  ];

  // pinia仓库中的方法: 不知道作用是什么
  // 按我的理解, 这个的作用就是把在当前组件中定义的局部变量viewer添加到pinia仓库中lineData这个独立的store中, 那么其他组件就可以直接从仓库进行访问
  lineDataStore.setViewer(markRaw(viewer));

  const data = await getWeather();
  // console.log('天气信息', data);
  //加载地铁线路
  const lineData = await getLine();
  // console.log('地铁线路数据', lineData);
  lineDataStore.setData(markRaw(lineData));
  // 发射事件到父组件
  emit('mounted');

  // 加载多个3dtiles
  await loadTilesets(viewer, modelUrls, tilesets => {
    handleDefaultModelEffect(tilesets[0]);
    lineDataStore.setTileset(markRaw(tilesets[0]));
  });
  //加载水域json
  await loadWaterJson(
    viewer,
    'http://localhost:8888/wuhanWater_coordinerRight.json'
  );
});
</script>

<style>
#cesium-viewer {
  width: 100%;
  height: 100%;
  pointer-events: all;

  .position-bar {
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding: 10px;
    color: #fff;
  }
}
</style>
